<!doctype html>
<html>
	<head>
		<meta charset='UTF-8'>
		<meta name='viewport' content='width=device-width initial-scale=1'>
		<title></title>
		<link href='https://fonts.loli.net/css?family=Open+Sans:400italic,700italic,700,400&subset=latin,latin-ext' rel='stylesheet'
		 type='text/css' />
		<link rel="stylesheet" type="text/css" href="../css/wenzhang.css" />
		<link rel="stylesheet" type="text/css" href="../css/index.css"/>
	</head>
	<body>
		<div class="daohang">
		
			<div class="right">
				<ul class="daohang_ul">
					<li><a href="../index.html">首页</a></li>
					<li><a href="./wz00.html">设计要求</a></li>
					<li><a href="../gunyvwo.html">关于我</a></li>
					<li><a href="../xiangce.html">我的相册</a></li>
					<li><a href="../shopin1.html">喜欢的视频</a></li>
					<li><a href="../register.html">登录/注册</a></li>
				</ul>
			</div>
		</div>
		<div id='write' class=''>
			<h1><a name="html" class="md-header-anchor"></a><span>HTML</span></h1>
			<h1><a name="html学习笔记" class="md-header-anchor"></a><span>HTML学习笔记</span></h1>
			<ul>
				<li>
					<p><span>HTML（超文本标记语言）</span></p>
					<ul>
						<li><span>超文本指超链接，可从一个页面跳转到另一个页面</span></li>
					</ul>
				</li>
				<li>
					<p><span>使用标签的形式来标识网页中不同组成部分</span></p>
				</li>
			</ul>
			<h2><a name="编写网页" class="md-header-anchor"></a><span>编写网页</span></h2>
			<h3><a name="标签" class="md-header-anchor"></a><span>标签</span></h3>
			<ul>
				<li><span>网页代码必须写在标签中，标签为&lt;标签&gt;式样，开始和结束时都要加标签，所以用&lt;/标签&gt;来区分开始标签和结束标签</span></li>
				<li><span>eg：</span></li>
			</ul>
			<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" style="break-inside: unset;"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="html"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">html</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
		</div>
		<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">head</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
		<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">title</span><span class="cm-tag cm-bracket">&gt;</span>乡愁<span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">title</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
		<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag cm-error">head</span><span class="cm-tag cm-bracket cm-error">&gt;</span></span></pre>
		<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">body</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
		<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">h1</span><span class="cm-tag cm-bracket">&gt;</span>乡愁<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">h1</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
		<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">h2</span><span class="cm-tag cm-bracket">&gt;</span>余光中<span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">h2</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
		<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span>小时候<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
		<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span>乡愁是一张小小的邮票<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
		<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span>我在这头<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
		<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span>母亲在那头<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
		<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span>长大后<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
		<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span>乡愁是一张窄窄的船票<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
		<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span>我在这头<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
		<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span>新娘在那头<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
		<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span>后来啊<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
		<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span>乡愁是一方矮矮的坟墓<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
		<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span>我在外头<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
		<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span>母亲在里头<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
		<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span>而现在<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
		<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span>乡愁是一湾浅浅的海峡<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
		<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span>我在这头<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
		<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span>大陆在那头<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
		<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tag cm-bracket">&lt;</span> <span class="cm-tag">/body</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
		<pre class=" CodeMirror-line " role="presentation"><span role="presentation" class="cm-tab-wrap-hack" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag cm-error">html</span><span class="cm-tag cm-bracket cm-error">&gt;</span><span class="cm-tab" role="presentation" cm-text="	"> </span></span></pre>
		<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">12345678910111213141516171819202122232425</span></pre>
		</div>
		</div>
		</div>
		</div>
		</div>
		<div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 598px;"></div>
		<div class="CodeMirror-gutters" style="display: none; height: 598px;"></div>
		</div>
		</div>
		</pre>
		<ul>
			<li><span>大多数代码都要写在</span><em><span>根标签</span></em><span>&lt; html&gt;&lt; /html&gt;中，一个网页只有一个根标签</span></li>
			<li><span>&lt; head&gt;部分内容不会显示在网页中,&lt; title&gt;部分是网页的标题，title标签的内容会作为搜索结果的超链接上的文字显示</span></li>
			<li><span>&lt; body&gt;部分中的内容才会显示在网页中</span></li>
			<li><span>&lt; h1&gt;&lt; h2&gt;表示各级标题</span></li>
			<li><span>&lt; p&gt;表示页面中的一个段落</span></li>
			<li><span>&lt; head&gt;是&lt; html&gt;的子标签，&lt; title&gt;是&lt; head&gt;的子标签，称&lt; html&gt;是&lt; title&gt;的祖先，&lt;
					title&gt;是&lt; html&gt;的后代</span></li>
		</ul>
		<h4><a name="自结束标签" class="md-header-anchor"></a><span>自结束标签</span></h4>
		<ul>
			<li>
				<p><span>标签一般成对出现，但存在一部分标签没有结束标签，自己结束自己</span></p>
			</li>
			<li>
				<p><span>有两种格式</span></p>
				<ul>
					<li><span>&lt; img&gt; &lt; input&gt;</span></li>
					<li><span>&lt; img /&gt; &lt; input/&gt;</span></li>
				</ul>
			</li>
		</ul>
		<h4><a name="注释" class="md-header-anchor"></a><span>注释</span></h4>
		<ul>
			<li>
				<p><span>写法</span></p>
				<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="html"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre>
				</div>
				<div class="CodeMirror-measure"></div>
				<div style="position: relative; z-index: 1;"></div>
				<div class="CodeMirror-code" role="presentation">
					<div class="CodeMirror-activeline" style="position: relative;">
						<div class="CodeMirror-activeline-background CodeMirror-linebackground"></div>
						<div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div>
						<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">&lt;!--</span></span></pre>
					</div>
					<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">注释内容 &nbsp; &nbsp;</span></span></pre>
					<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">--&gt;</span></span></pre>
					<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">123</span></pre>
				</div>
				</div>
				</div>
				</div>
				</div>
				<div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 92px;"></div>
				<div class="CodeMirror-gutters" style="display: none; height: 92px;"></div>
				</div>
				</div>
				</pre>
			</li>
			<li>
				<p><span>注释不能进行嵌套</span></p>
			</li>
		</ul>
		<h4><a name="标签属性" class="md-header-anchor"></a><span>标签属性</span></h4>
		<ul>
			<li><span>属性用来设置标签中的内容如何显示</span></li>
			<li><span>属性是一个名值对（x=y）</span></li>
		</ul>
		<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="html"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre>
		</div>
		<div class="CodeMirror-measure"></div>
		<div style="position: relative; z-index: 1;"></div>
		<div class="CodeMirror-code" role="presentation" style="">
			<div class="CodeMirror-activeline" style="position: relative;">
				<div class="CodeMirror-activeline-background CodeMirror-linebackground"></div>
				<div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div>
				<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">html</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
			</div>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">head</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">title</span><span class="cm-tag cm-bracket">&gt;</span>标签属性<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">title</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">head</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">body</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">h1</span><span class="cm-tag cm-bracket">&gt;</span>这是我的<span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">font</span> <span class="cm-attribute">color</span> = <span class="cm-string">" red "</span><span class="cm-tag cm-bracket">&gt;</span>第三个<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">font</span><span class="cm-tag cm-bracket">&gt;</span>网页！<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">h1</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">body</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag cm-error">html</span><span class="cm-tag cm-bracket cm-error">&gt;</span></span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">12345678</span></pre>
		</div>
		</div>
		</div>
		</div>
		</div>
		<div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 207px;"></div>
		<div class="CodeMirror-gutters" style="display: none; height: 207px;"></div>
		</div>
		</div>
		</pre>
		<ul>
			<li>
				<p><span>&lt; font color = “red”&gt;第三个&lt; /font&gt;是对标签增加属性，将“第三个”变成红色字样</span></p>
				<ul>
					<li><span>color为属性名，red为属性值</span></li>
					<li><span>属性应根据文档中规定来编写，部分属性有属性值（根据文档中规定来编写，并将属性值用引号（单双引号皆可）引起来），部分没有（直接写一个属性名），</span></li>
				</ul>
			</li>
			<li>
				<p><span>属性和标签名或其他属性应该使用空格隔开</span></p>
			</li>
			<li>
				<p><span>标签color设置颜色</span></p>
				<p><span>标签size设置大小</span></p>
			</li>
		</ul>
		<h4><a name="mate标签" class="md-header-anchor"></a><span>mate标签</span></h4>
		<ul>
			<li>
				<p><span>mate标签用来表示元数据，元数据不是给用户看的</span></p>
				<ul>
					<li><span>charset——指定网页字符集</span></li>
					<li><span>name——指定数据名称</span></li>
					<li><span>content——指定数据内容</span></li>
					<li><span>http-equiv将页面重定向（跳转）到另一个网站</span></li>
				</ul>
				<p><span>eg：</span></p>
				<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="html"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre>
				</div>
				<div class="CodeMirror-measure"></div>
				<div style="position: relative; z-index: 1;"></div>
				<div class="CodeMirror-code" role="presentation" style="">
					<div class="CodeMirror-activeline" style="position: relative;">
						<div class="CodeMirror-activeline-background CodeMirror-linebackground"></div>
						<div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div>
						<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">meta</span> <span class="cm-attribute">name</span> = <span class="cm-string">"keywords"</span> <span class="cm-attribute">content</span> = <span class="cm-string">"HTML5,前端，CSS3"</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
					</div>
					<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">meta</span> <span class="cm-attribute">name</span> = <span class="cm-string">"description"</span> <span class="cm-attribute">content</span> = <span class="cm-string">"这是一个非常nice网站"</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
					<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">&lt;!--keywords 表示网页的关键字，可同时指定多个关键字，关键字之间使用逗号隔开--&gt;</span></span></pre>
					<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">meta</span> <span class="cm-attribute">http-equiv</span> = <span class="cm-string">"refresh"</span> <span class="cm-attribute">content</span> = <span class="cm-string">"3,url=跳转网址"</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
					<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">&lt;!--3表示三秒钟后跳转--&gt;</span></span></pre>
					<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">12345</span></pre>
				</div>
				</div>
				</div>
				</div>
				</div>
				<div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 138px;"></div>
				<div class="CodeMirror-gutters" style="display: none; height: 138px;"></div>
				</div>
				</div>
				</pre>
				<h5><a name="常用数据名称" class="md-header-anchor"></a><span>常用数据名称</span></h5>
				<ul>
					<li><span>keywords 表示网页的关键字，可同时指定多个关键字，关键字之间使用逗号隔开</span></li>
					<li><span>description用于指定网站的描述,网站描述会显示在搜索引擎的搜索结果中</span></li>
				</ul>
			</li>
		</ul>
		<h4><a name="语义化标签" class="md-header-anchor"></a><span>语义化标签</span></h4>
		<ul>
			<li>
				<p><span>网页中HTML专门用来负责网页的结构，所以使用HTML标签时，应关注标签的语义，而不是其样式</span></p>
			</li>
			<li>
				<p><span>页面中独占一行的元素称为块元素（block element），&lt; h&gt;和&lt; p&gt;都是块元素</span></p>
				<ul>
					<li><span>网页中一般通过块元素来对页面进行布局</span></li>
				</ul>
			</li>
			<li>
				<p><span>不独占一行的元素称为行内元素（inline element），&lt; em&gt;就是行内元素</span></p>
				<ul>
					<li><span>行内元素主要用来包裹文字标</span></li>
				</ul>
			</li>
			<li>
				<p><span>一般在块元素内放行内元素，而不是在行内元素中放块元素</span></p>
			</li>
		</ul>
		<p><span> 块元素内基本什么都能放，但&lt; p&gt;元素中不能放任何块元素</span></p>
		<ul>
			<li>
				<p><span>浏览器解析网页的时候会自动对网页中不合规范的内容进行修正</span></p>
				<p><span>eg：标签写在根元素外部</span></p>
				<p><span> p元素中嵌套块元素</span></p>
				<p><span> 根元素中出现了除head和body以外的子元素</span></p>
			</li>
		</ul>
		<h5><a name="标题标签" class="md-header-anchor"></a><span>标题标签</span></h5>
		<ul>
			<li><span>h1到h6共有六级标题</span></li>
			<li><span>h1~h6重要性递减，h1最重要，h6最不重要</span></li>
			<li><span>h1在网页中重要性仅次于title标签，一般一个页面只有一个h1标题</span></li>
		</ul>
		<p><span>&lt; hgroup&gt;标签，用来为标题分组，可将一组相关标题同时放入hgroup</span></p>
		<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="html"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre>
		</div>
		<div class="CodeMirror-measure"></div>
		<div style="position: relative; z-index: 1;"></div>
		<div class="CodeMirror-code" role="presentation" style="">
			<div class="CodeMirror-activeline" style="position: relative;">
				<div class="CodeMirror-activeline-background CodeMirror-linebackground"></div>
				<div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div>
				<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">hgroup</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
			</div>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">h1</span><span class="cm-tag cm-bracket">&gt;</span>回乡偶书二首<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">h1</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">h2</span><span class="cm-tag cm-bracket">&gt;</span>其二<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">h2</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">hgroup</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">1234</span></pre>
		</div>
		</div>
		</div>
		</div>
		</div>
		<div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 115px;"></div>
		<div class="CodeMirror-gutters" style="display: none; height: 115px;"></div>
		</div>
		</div>
		</pre>
		<ul>
			<li>
				<p><span>&lt; em&gt;标签</span></p>
				<p><span>em标签用来表示语调的加重</span></p>
				<p><span>&lt; strong&gt;标签</span></p>
				<p><span>strong标签表示强调，重要内容！</span></p>
				<p><span>&lt; blockquobt&gt;与&lt; q&gt;标签</span></p>
				<p><span>blockquobt标签表示一个长引用,q标签表示一个短引用；前者是一个块元素，后者是一个行内元素</span></p>
				<p><span>&lt; br&gt;标签表示换行（相当于\n)</span></p>
				<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="html"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><span><span>​</span>x</span></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span>今天是个<span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">em</span><span class="cm-tag cm-bracket">&gt;</span>好<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">em</span><span class="cm-tag cm-bracket">&gt;</span>日子！<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
				</div>
				<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">&lt;!--此处em标签的作用是表示“好”字的语音语调加重，在网页中的呈现效果是“好”字为斜体--&gt;</span></span></pre>
				<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="">​</span></span></pre>
				<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span>今天天气<span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">strong</span><span class="cm-tag cm-bracket">&gt;</span>不错!<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">strong</span><span class="cm-tag cm-bracket">&gt;&lt;/</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
				<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">&lt;!--此处strong标签的作用是强调“不错”二字，在网页中的呈现效果是“不错”二字加粗--&gt;</span></span></pre>
				<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="">​</span></span></pre>
				<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">鲁迅说<span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">blockquobt</span><span class="cm-tag cm-bracket">&gt;</span>这句话我没说过！<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">blockquobt</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
				<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="">​</span></span></pre>
				<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">子曰<span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">q</span><span class="cm-tag cm-bracket">&gt;</span>学而时习之，乐乐呵呵！<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">q</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
				<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">123456789</span></pre>
				</div>
				</div>
				</div>
				</div>
				</div>
				<div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 230px;"></div>
				<div class="CodeMirror-gutters" style="display: none; height: 230px;"></div>
				</div>
				</div>
				</pre>
			</li>
		</ul>
		<h4><a name="结构化语义标签" class="md-header-anchor"></a><span>结构化语义标签</span></h4>
		<p><em><span>主要用来把网页划分为块</span></em></p>
		<ul>
			<li>
				<p><span>header表示网页的头部</span></p>
				<p><span>main表示网页的主题部分（一个页面只有一个）</span></p>
				<p><span>ooter 表示网页底部</span></p>
				<p><span>nav表示网页中的导航</span></p>
				<p><span>aside表示与主体相关的其他内容（侧边栏/注释）</span></p>
				<p><span>article表示文章</span></p>
				<p><span>section表示一个独立区块，上面的标签都不能表示时使用section</span></p>
			</li>
			<li>
				<p><span>div 没有语义，就表示一个区块，目前最主要的布局元素</span></p>
				<p><span>span 行内元素，无任何语义，一般用于在网页中选中文字</span></p>
			</li>
		</ul>
		<h4><a name="列表" class="md-header-anchor"></a><span>列表</span></h4>
		<ol>
			<li>
				<p><span>有序列表</span></p>
				<p><span>使用ol标签来创建有序列表</span></p>
				<p><span>使用li表示列表项</span></p>
				<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="html"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre>
				</div>
				<div class="CodeMirror-measure"></div>
				<div style="position: relative; z-index: 1;"></div>
				<div class="CodeMirror-code" role="presentation" style="">
					<div class="CodeMirror-activeline" style="position: relative;">
						<div class="CodeMirror-activeline-background CodeMirror-linebackground"></div>
						<div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div>
						<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">ol</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
					</div>
					<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">&gt;</span>第一项<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
					<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">&gt;</span>第二项<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
					<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">ol</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
					<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">1234</span></pre>
				</div>
				</div>
				</div>
				</div>
				</div>
				<div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 115px;"></div>
				<div class="CodeMirror-gutters" style="display: none; height: 115px;"></div>
				</div>
				</div>
				</pre>
			</li>
			<li>
				<p><span>无序列表（导航菜单）</span></p>
				<p><span>使用ul标签来创建有序列表</span></p>
				<p><span>使用li表示列表项</span></p>
				<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="html"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre>
				</div>
				<div class="CodeMirror-measure"></div>
				<div style="position: relative; z-index: 1;"></div>
				<div class="CodeMirror-code" role="presentation" style="">
					<div class="CodeMirror-activeline" style="position: relative;">
						<div class="CodeMirror-activeline-background CodeMirror-linebackground"></div>
						<div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div>
						<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">ul</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
					</div>
					<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">&gt;</span>项目<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
					<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">&gt;</span>结构<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
					<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">&gt;</span>表现<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">li</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
					<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">ul</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
					<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">12345</span></pre>
				</div>
				</div>
				</div>
				</div>
				</div>
				<div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 138px;"></div>
				<div class="CodeMirror-gutters" style="display: none; height: 138px;"></div>
				</div>
				</div>
				</pre>
			</li>
			<li>
				<p><span>定义列表</span></p>
				<p><span>使用dl标签来创建一个定义列表</span></p>
				<p><span>使用dt表示定义内容</span></p>
				<p><span>使用dd来对内容进行解释说明</span></p>
				<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="html"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre>
				</div>
				<div class="CodeMirror-measure"></div>
				<div style="position: relative; z-index: 1;"></div>
				<div class="CodeMirror-code" role="presentation" style="">
					<div class="CodeMirror-activeline" style="position: relative;">
						<div class="CodeMirror-activeline-background CodeMirror-linebackground"></div>
						<div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div>
						<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">dl</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
					</div>
					<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">dt</span><span class="cm-tag cm-bracket">&gt;</span>结构<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">dt</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
					<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">dd</span><span class="cm-tag cm-bracket">&gt;</span>结构表示网页结构，用来规定网页哪里是标题，哪里是段落<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">dd</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
					<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">dl</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
					<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">1234</span></pre>
				</div>
				</div>
				</div>
				</div>
				</div>
				<div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 115px;"></div>
				<div class="CodeMirror-gutters" style="display: none; height: 115px;"></div>
				</div>
				</div>
				</pre>
			</li>
		</ol>
		<p><span>列表间可以相互嵌套</span></p>
		<h3><a name="网页基本结构" class="md-header-anchor"></a><span>网页基本结构</span></h3>
		<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" style="break-inside: unset;"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="html"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre>
		</div>
		<div class="CodeMirror-measure"></div>
		<div style="position: relative; z-index: 1;"></div>
		<div class="CodeMirror-code" role="presentation" style="">
			<div class="CodeMirror-activeline" style="position: relative;">
				<div class="CodeMirror-activeline-background CodeMirror-linebackground"></div>
				<div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div>
				<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">&lt;!--文档声明--&gt;</span></span></pre>
			</div>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-meta">&lt;!doctype html&gt;</span></span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="">​</span></span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">&lt;!--html的根标签--&gt;</span></span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">html</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="">​</span></span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-comment">&lt;!--head 是网页头部，不显示在网页中，主要帮助浏览器或搜索引擎来解析网页--&gt;</span></span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">head</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" class="cm-tab-wrap-hack" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span></span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-comment">&lt;!--meta标签用来设置网页元数据，这里用mate来设置网页字符集，防止错码--&gt;</span></span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">meta</span> <span class="cm-attribute">charset</span> = <span class="cm-string">"utf-8"</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" class="cm-tab-wrap-hack" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tab" role="presentation" cm-text="	">    </span></span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-comment">&lt;!--title 中的内容会显示在浏览器标题栏，搜索引擎会主要根据title中的内容判断网页主要内容--&gt;</span></span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">title</span><span class="cm-tag cm-bracket">&gt;</span>网页标题<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">title</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" class="cm-tab-wrap-hack" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span></span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">head</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" class="cm-tab-wrap-hack" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span></span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-comment">&lt;!--网页的主体，网页中可见内容都应写在body中--&gt;</span></span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">body</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" class="cm-tab-wrap-hack" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span></span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-comment">&lt;!--h1为网页一级标题--&gt;</span></span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">h1</span><span class="cm-tag cm-bracket">&gt;</span>一级标题<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">h1</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span>正文<span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" class="cm-tab-wrap-hack" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span></span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">body</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="">​</span></span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">html</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="">​</span></span></pre>
			<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">12345678910111213141516171819202122232425262728</span></pre>
		</div>
		</div>
		</div>
		</div>
		</div>
		<div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 690px;"></div>
		<div class="CodeMirror-gutters" style="display: none; height: 690px;"></div>
		</div>
		</div>
		</pre>
		<ul>
			<li>
				<p><span>网页的更新称为</span><em><span>迭代</span></em></p>
			</li>
			<li>
				<p><span>文档声明（doctype）</span></p>
				<ul>
					<li>
						<p><span>文档声明应该放到代码最前面，即第一行的&lt; html&gt;外面</span></p>
					</li>
					<li>
						<p><span>文档声明用来告诉浏览器当前网页版本</span></p>
					</li>
					<li>
						<p><span>html5的文档声明&lt; !doctype hyml&gt;</span></p>
						<p><span> &lt; !Doctype html&gt;</span></p>
						<p><span> &lt; !doctype HTML&gt;</span></p>
					</li>
				</ul>
			</li>
			<li>
				<p><span>常见字符集</span></p>
				<ul>
					<li><span>ascll</span></li>
					<li><span>ISO88591</span></li>
					<li><span>GB2312</span></li>
					<li><span>GBX</span></li>
					<li><span>UTF-8（万国码）</span></li>
				</ul>
			</li>
			<li>
				<p><span>可通过在head标签里meta标签来设置网页字符集，避免乱码</span></p>
			</li>
		</ul>
		<h3><a name="实体" class="md-header-anchor"></a><span>实体</span></h3>
		<ul>
			<li>
				<p><span>在HTML中，有时不能直接书写一些特殊符号</span></p>
				<p><span>eg： 0x1多个连续空格（网页编写时多个空格会被浏览器默认自动解析为一个空格，）</span></p>
				<p><span> 0x2字母两侧同时写大于号和小于号</span></p>
				<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="html"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre>
				</div>
				<div class="CodeMirror-measure"></div>
				<div style="position: relative; z-index: 1;"></div>
				<div class="CodeMirror-code" role="presentation">
					<div class="CodeMirror-activeline" style="position: relative;">
						<div class="CodeMirror-activeline-background CodeMirror-linebackground"></div>
						<div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div>
						<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">a<span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">b</span><span class="cm-tag cm-bracket">&gt;</span>c</span></pre>
					</div>
					<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-comment">&lt;!--网页上显示的为ac（加粗）--&gt;</span></span></pre>
					<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-comment">&lt;!--此处&lt;b&gt;不会表示在网页中，因为&lt;b&gt;成为了一个头标签，且正好为加粗--&gt;</span></span></pre>
					<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">123</span></pre>
				</div>
				</div>
				</div>
				</div>
				</div>
				<div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 92px;"></div>
				<div class="CodeMirror-gutters" style="display: none; height: 92px;"></div>
				</div>
				</div>
				</pre>
				<p><span>如果在网页中需要书写这些特殊符号，则需要使用HTML中的实体（转义字符）</span></p>
			</li>
		</ul>
		<h4><a name="实体语法" class="md-header-anchor"></a><span>实体语法</span></h4>
		<ul>
			<li>
				<p><span>&amp;实体名字；</span></p>
				<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="html"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre>
				</div>
				<div class="CodeMirror-measure"></div>
				<div style="position: relative; z-index: 1;"></div>
				<div class="CodeMirror-code" role="presentation">
					<div class="CodeMirror-activeline" style="position: relative;">
						<div class="CodeMirror-activeline-background CodeMirror-linebackground"></div>
						<div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div>
						<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
					</div>
					<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span>今天<span class="cm-atom">&amp;nbsp;</span>天气真不行<span class="cm-comment">&lt;!--&amp;nbsp为空格的实体--&gt;</span></span></pre>
					<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">p</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
					<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">123</span></pre>
				</div>
				</div>
				</div>
				</div>
				</div>
				<div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 92px;"></div>
				<div class="CodeMirror-gutters" style="display: none; height: 92px;"></div>
				</div>
				</div>
				</pre>
			</li>
			<li>
				<p><span>和auvdc</span></p>
			</li>
		</ul>
		<h4><a name="实体有哪些" class="md-header-anchor"></a><span>实体有哪些</span></h4>
		<ul>
			<li><span>&amp; nbsp;空格</span></li>
			<li><span>&amp; gt;大于号</span></li>
			<li><span>&amp; lt;小于号</span></li>
			<li><span>&amp; copy;版权符号</span></li>
			<li><span>更多详见</span><a href='https://www.w3school.com.cn/index.html' target='_blank' class='url'>https://www.w3school.com.cn/index.html</a></li>
		</ul>
		<h3><a name="超链接" class="md-header-anchor"></a><span>超链接</span></h3>
		<p><span>超链接可以让我们从一个页面跳转到其他页面</span></p>
		<p><span> 或是当前页面的其他位置</span></p>
		<ul>
			<li><span>使用a标签来定义超链接（a标签是一个行内元素，可嵌套除它自身外任何元素）</span></li>
		</ul>
		<h4><a name="属性" class="md-header-anchor"></a><span>属性</span></h4>
		<h5><a name="href-属性" class="md-header-anchor"></a><span>href 属性</span></h5>
		<ul>
			<li>
				<p><span>指定跳转的目标路径</span></p>
				<ul>
					<li><span>值可以是一个外部网站的地址</span></li>
					<li><span>值也可以是内部页面的地址</span></li>
				</ul>
			</li>
		</ul>
		<h5><a name="相对路径" class="md-header-anchor"></a><span>相对路径</span></h5>
		<ul>
			<li>
				<p><span>当我们需要跳转到一个服务器内部的页面时，一般我们都会使用相对路径</span></p>
				<ul>
					<li><span>相对路径都会使用./或…/开头</span></li>
					<li><span>./可以省略不写，如果两者都不写，则默认写了./</span></li>
					<li><span>./表示当前文件所在目录</span></li>
					<li><span>…/表示当前文件所在目录的上一级目</span></li>
					<li><span>当需要进入下一级文件时直接用 /路径</span></li>
				</ul>
			</li>
		</ul>
		<h5><a name="target属性" class="md-header-anchor"></a><span>target属性</span></h5>
		<ul>
			<li>
				<p><span>用于指定超链接打开地址</span></p>
				<p><span>可选值：</span></p>
				<ul>
					<li><em><span>self 默认值，在当前页面打开超链接</span></em></li>
					<li><span>blank 在在一个新的页面中打开超链接</span></li>
				</ul>
			</li>
		</ul>
		<h5><a name="id属性唯一不重复）" class="md-header-anchor"></a><span>id属性（唯一不重复）</span></h5>
		<ul>
			<li>
				<p><span>每个标签都可添加一个id属性</span></p>
			</li>
			<li>
				<p><span>id属性是元素唯一标识，同一个页面中不能出现重复的id属性</span></p>
			</li>
			<li>
				<p><span>要跳转到页面中指定位置，只需将herf属性设置为 #目标元素id属性值</span></p>
			</li>
			<li>
				<p><span>开发时可将#作为超链接路径的占位符，但点击后会存在返回顶部的反应</span></p>
				<p><span>也可用 javascript:; 来作为 herf 的属性，此时点击超链接后无任何反应</span></p>
			</li>
		</ul>
		<h3><a name="图片标签" class="md-header-anchor"></a><span>图片标签</span></h3>
		<ul>
			<li>
				<p><span>图片标签用于向当前页面中引入一个外部图片</span></p>
				<ul>
					<li><span>使用img标签来引入外部图片，img标签是一个自结束标签</span></li>
					<li><span>img这种元素属于替换元素（基于块和行内元素之间，具有两种元素的特点）</span></li>
				</ul>
			</li>
		</ul>
		<h4><a name="属性-n291" class="md-header-anchor"></a><span>属性</span></h4>
		<ul>
			<li>
				<p><span>src 属性指定外部图片的路径</span></p>
			</li>
			<li>
				<p><span>alt 图片的描述，默认情况下不会显示，有些浏览器在图片无法加载时显示</span></p>
				<ul>
					<li><span>搜索引擎会根据alt中的内容来识别图片</span></li>
				</ul>
			</li>
			<li>
				<p><span>width 图片宽度（单位是像素）</span></p>
			</li>
			<li>
				<p><span>height 图片高度</span></p>
				<ul>
					<li><span>宽度和高度中只修改一个则另一个等比例缩放</span></li>
					<li><span>同时修改时图片会被拉伸</span></li>
				</ul>
				<p><span>一般在pc端，不建议修改图片大小，要多大裁多大</span></p>
				<p><span>但移动端，经常需要对图片缩放（大缩小）</span></p>
			</li>
		</ul>
		<h4><a name="图片格式" class="md-header-anchor"></a><span>图片格式</span></h4>
		<ul>
			<li>
				<p><span>jpeg（jpg）</span></p>
				<ul>
					<li><span>支持颜色较丰富，不支持透明效果，不支持动图</span></li>
					<li><span>一般用来显示照片</span></li>
				</ul>
			</li>
			<li>
				<p><span>gif</span></p>
				<ul>
					<li><span>支持颜色较少，支持简单透明，支持动图</span></li>
					<li><span>适合单一图片，动图</span></li>
				</ul>
			</li>
			<li>
				<p><span>png 支持颜色丰富，支持复杂透明，不支持动图</span></p>
				<ul>
					<li><span>颜色丰富，复杂透明图片（专为网页而生）</span></li>
				</ul>
			</li>
			<li>
				<p><span>webp</span></p>
				<ul>
					<li><span>谷歌推出的专用于表示网页中的图片的一种格式</span></li>
					<li><span>它具备其他图片格式的所有优点，且文件小</span></li>
					<li><span>缺点，兼容性不好</span></li>
				</ul>
			</li>
			<li>
				<p><span>base-64</span></p>
				<ul>
					<li><span>将图片使用base64进行编码，可将图片转换为字符，通过字符形式引入图片</span></li>
					<li><span>一般用于一些需要和网页一起加载出来的图片才会使用base64</span></li>
					<li><span>要获得图片字符直接上网搜索 图片转换base64</span></li>
				</ul>
			</li>
		</ul>
		<p><span>效果一样，用小的</span></p>
		<p><span>效果不一样，用效果好的</span></p>
		<h3><a name="内联框架" class="md-header-anchor"></a><span>内联框架</span></h3>
		<ul>
			<li>
				<p><span>iframe标签 内联框架，用于向当前页面中引入一个其他页面</span></p>
				<ul>
					<li><span>src 指定要引入的网页的路径</span></li>
					<li><span>frameborder 指定内联框架的边框</span></li>
				</ul>
			</li>
		</ul>
		<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="html"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre>
		</div>
		<div class="CodeMirror-measure"></div>
		<div style="position: relative; z-index: 1;"></div>
		<div class="CodeMirror-code" role="presentation">
			<div class="CodeMirror-activeline" style="position: relative;">
				<div class="CodeMirror-activeline-background CodeMirror-linebackground"></div>
				<div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div>
				<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">iframe</span> <span class="cm-attribute">src</span> = <span class="cm-string">"http://baidu.com"</span> <span class="cm-attribute">width</span> = <span class="cm-string">"600"</span> <span class="cm-attribute">height</span> = <span class="cm-string">"800"</span> <span class="cm-attribute">frameborder</span> = <span class="cm-string">"0"</span><span class="cm-tag cm-bracket">&gt;&lt;/</span><span class="cm-tag">iframe</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
			</div>
			<div class="" style="position: relative;">
				<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">1</span></pre>
			</div>
		</div>
		</div>
		</div>
		</div>
		</div>
		<div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 69px;"></div>
		<div class="CodeMirror-gutters" style="display: none; height: 69px;"></div>
		</div>
		</div>
		</pre>
		<h3><a name="音频与视频" class="md-header-anchor"></a><span>音频与视频</span></h3>
		<h4><a name="音频" class="md-header-anchor"></a><span>音频</span></h4>
		<ul>
			<li>
				<p><span>audio标签 用来向页面中引入一个外部音频文件</span></p>
				<ul>
					<li><span>音视频文件引入时，默认情况下不允许用户自己控制播放停止</span></li>
				</ul>
				<p><span>属性：</span></p>
				<ul>
					<li>
						<p><span>用 src 指定外部文件路径</span></p>
					</li>
					<li>
						<p><span>controls 是否允许用户控制播放</span></p>
					</li>
					<li>
						<p><span>autoplay 音频文件是否自动播放</span></p>
						<ul>
							<li><span>如果设置了autoplay，则音乐在打开页面时会自动播放</span></li>
							<li><span>但目前大多数浏览器不会自动对音乐进行播放</span></li>
						</ul>
					</li>
					<li>
						<p><span>loop 循环播放</span></p>
					</li>
					<li>
						<p><span>除用src 来指定外部文件路径外，还可以使用source来指定文件路径</span></p>
					</li>
					<li>
						<p><span>用embed 来兼容IE8及以下的浏览器版本</span></p>
					</li>
				</ul>
				<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="html"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre>
				</div>
				<div class="CodeMirror-measure"></div>
				<div style="position: relative; z-index: 1;"></div>
				<div class="CodeMirror-code" role="presentation" style="">
					<div class="CodeMirror-activeline" style="position: relative;">
						<div class="CodeMirror-activeline-background CodeMirror-linebackground"></div>
						<div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div>
						<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">audio</span> <span class="cm-attribute">controls</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
					</div>
					<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text="	">    </span>对不起，您的浏览器不支持播放音频！请升级浏览器！</span></pre>
					<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">source</span> <span class="cm-attribute">src</span>=<span class="cm-string">"音频路径"</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
					<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">source</span> <span class="cm-attribute">src</span>=<span class="cm-string">"音频路径"</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
					<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">embed</span> <span class="cm-attribute">src</span>= <span class="cm-string">"音频路径"</span> <span class="cm-attribute">type</span>= <span class="cm-string">"audio/音频格式"</span> <span class="cm-attribute">width</span>=<span class="cm-string">"600"</span> &nbsp;<span class="cm-attribute">height</span>=<span class="cm-string">"300"</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
					<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;</span></pre>
					<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-comment">&lt;!--这里可以用embed兼容IE8及以下的浏览器版本，这时就不存在不支持播放音频文件的情况了，所以embed和“对不起.....”二选一就可以了--&gt;</span></span></pre>
					<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;</span></pre>
					<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">audio</span><span class="cm-tag cm-bracket">&gt;</span></span></pre>
					<pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">123456789</span></pre>
				</div>
				</div>
				</div>
				</div>
				</div>
				<div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 253px;"></div>
				<div class="CodeMirror-gutters" style="display: none; height: 253px;"></div>
				</div>
				</div>
				</pre>
				<p><span>可用这种方式有效解决不同浏览器间不兼容不同格式的音频的问题以及IE8版本不兼容问题</span></p>
			</li>
		</ul>
		<h4><a name="视频" class="md-header-anchor"></a><span>视频</span></h4>
		<ul>
			<li>
				<p><span>video标签 向网页中引入一个视频</span></p>
				<ul>
					<li><span>使用方式与audio基本相同</span></li>
					<li><span>可以通过直接使用其他网页的视频地址，这样不占用自己服务器资源</span></li>
				</ul>
			</li>
		</ul>
		</div>
	</body>
</html>
